<template>
  <el-card class="box-card">
    <div slot="header" class="QuestionHeader">
      <span style="float: left; padding: 10px 0">历史提问</span>
      <el-input v-model="input" placeholder="请输入查询条件" style="width: 75%; " clearable></el-input>
    </div>
    <div class="QuestionBody">
      <el-collapse v-model="activeNames" @change="handleChange">
        <el-collapse-item title="一致性 Consistency" name="1">
          <div style="text-align: left">与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；</div>
        </el-collapse-item>
        <el-collapse-item title="反馈 Feedback" name="2">
          <div style="text-align: left">控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；</div>
        </el-collapse-item>
        <el-collapse-item title="效率 Efficiency" name="3">
          <div style="text-align: left">简化流程：设计简洁直观的操作流程；</div>
        </el-collapse-item>
        <el-collapse-item title="可控 Controllability" name="4">
          <div style="text-align: left">用户决策：根据场景可给予用户操作建议或安全提示，但不能代替用户进行决策；</div>
        </el-collapse-item>
      </el-collapse>
    </div>
  </el-card>
</template>

<script>
  export default {
    data() {
      return {
        activeNames: '1',
        input:''
      };
    },
    methods: {
      handleChange(val) {
        console.log(val);
      }
    }
  }
</script>

<style>
  .box-card {
    width: 100%;
  }
  .QuestionHeader{
    height: 40px;
  }
  .QuestionBody{
    height: calc(400px - 100px);
    overflow-y: scroll;
  }

</style>

